<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="easyui.css" />
<link rel="stylesheet" href="style.css" />
<script src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js" ></script>

<title>js全国城市三级联动</title>
<style type="text/css">
body{ background:#EEEEEE;margin:0; padding:0; font-family:"微软雅黑", Arial, Helvetica, sans-serif; }
a{ color:#006600; text-decoration:none;}
a:hover{color:#990000;}

</style>
</head>
<body>
<div class="top">
    <h1 style="text-align:center">js全国城市三级联动</h1>
</div>
<table class="table01" border="0" cellspacing="0" cellpadding="0">
　　<tbody><tr>
　　　　<td>
　　　　   
		<span>省份：</span>
　　　　　　<select id="province" name="province"  class="easyui-combobox" style="width:200px;">
　　　　　　　　
　　　　　　</select>
　　　　</td>
　　</tr>
　　<tr>
　　　　<td>
		<span>城市</span>：
　　　　　　<select id="citys" name="city" class="easyui-combobox" style="width:200px;">
　　　　　　　　
　　　　　　</select>
　　　　</td>
　　</tr>
　　<tr>
　　　　<td>
		<span>区县：</span>
　　　　　　<select id="county" name="county" class="easyui-combobox" style="width:200px;">
　　　　　　　　
　　　　　　</select>
　　　　</td>
　　</tr></tbody>
</table>

<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>

</body>

<script>
	showPro();
	function showPro(){
		$.ajax({
			url : 'pca-code.json',
			 dataType: 'json',  
		     success: function (jsonstr) {  
		    	jsonstr.unshift({  
		            'code': '',  
		            'name': '请选择省份..'  
		        });
				$('#province').combobox({
					data: jsonstr,  
					valueField:'code',
					textField:'name',
					editable:false,
					onLoadSuccess:function (data){
						var data = $('#province').combobox('getData');					
						//console.log(JSON.stringify(data))
						if(data.length>0){
							$('#province').combobox('select',data[0].code);
						}
					},
					onChange : function(newValue, oldValue) {			
						if (newValue) {
							showCity(newValue)
							$("#citys").combobox("clear")
							$("#county").combobox("clear")					
						}
					}
				});
		     }
		});
	}

	function showCity(newValue){				
		$.ajax({
			 url : 'pca-code.json',
			 dataType: 'json',  
		     success: function (json) {
		     	
		     	var cityJson = json;
		     	//console.log(JSON.stringify(cityJson))
		     	$.each(cityJson, function(i, val) {
		        	if(val.code == newValue){ //判断省份的code 是否与省份的val 相同
	        			//console.log(JSON.stringify(val))
	        			val.childs.unshift({  
				            'code': '',  
				            'name': '请选择城市..'  
				        });
	        			$('#citys').combobox({
							data: val.childs,  
							valueField:'code',
							textField:'name',
							editable:false,
							onLoadSuccess:function (data){
								var data = $('#citys').combobox('getData');					
								//console.log(JSON.stringify(data))
								if(data.length>0){
									$('#citys').combobox('select',data[0].code);
								}
							},
							onChange : function(newValue, oldValue) {
								//console.log(newValue, oldValue)
								if (newValue) {				
									showCounty(String(newValue))
								}
							}							
						});
	        			
	        		}
		        })		     	
		     }
		})			
				
	}


	function showCounty(newValue){
				
		$.ajax({
			 url : 'pca-code.json',
			 dataType: 'json',  
		     success: function (json) {
		     	var cityJson = json;
		     	$.each(cityJson, function(i, val) {

		     		if(val.code == newValue.substr(0, 2)){
		     			var pro_childs =  val.childs;
		     			$.each(pro_childs, function(j, proVal) {// 然后 省份循环 寻找与省份对应的城市

			     			if(proVal.code == newValue){ //判断省份的code 是否与省份的val 相同
			     				proVal.childs.unshift({  
						            'code': '',  
						            'name': '请选择区/县..'  
						        });
			        			$('#county').combobox({
									data: proVal.childs,  
									valueField:'code',
									textField:'name',
									editable:false,
									onLoadSuccess:function (data){
										var data = $('#county').combobox('getData');					
										//console.log(JSON.stringify(data))
										if(data.length>0){
											$('#county').combobox('select',data[0].code);
										}
									}
								});
			        			
			        		}
			     		})
		     		}
		     		
		        	
		        })		     	
		     }
		})			
				
	}

</script>
